<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-show="addModalObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>新增图标信息</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              图标名称：
            </div>
            <input maxlength="100" type="text" v-model="AddModalData.NAME" class="modal-text f-l">
          </div>

          <div class="modal-row photo">
            <div class="modal-form-key f-l indispensable">
              图标上传：
            </div>
            <div class="photo-up-btn f-l">
              <input type="file" name="photo" ref="formFile" multiple  @change="filePhoto" class="modal-text f-l">
              <span class="photo-btn">选择相片</span>
              <input type="hidden" name="photoId" v-model="AddModalData.STORE_ID">
            </div>
            <button type="button" :disabled="isDisabled" class="btn btn-info f-l" @click="bindPhoto" v-show="photoSrc!==''">上传</button>
            <img :src="photoSrc" class="f-l photo-img" alt="">
          </div>


        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "AddIconModal",
        props:['addModalObj'],
        data(){
          return{
            AddModalData:{
              NAME:'', //图标名称
              STORE_ID:"",
              UPLOAD_USER:""
            },
            photoSrc:"",
            isDisabled:false,
          }
        },
        watch:{
          addModalObj:{
            handler(v1){
              if( v1.isShow ){
                this.AddModalData.UPLOAD_USER = this.isLogin().userId;
              }
            },
            deep:true
          }
        },
        methods:{
          //绑定图片
          bindPhoto(){
            this.s_loading(true);
            //jp-TIFS-FileCenter-ms/file?businessId=
            this.isDisabled = true;
            let param = new FormData();
            param.append('file',this.photoFile);//通过append向form对象添加数据
            //console.log(this.photoFile);
            let configFile = {
              headers:{'Content-Type':'multipart/form-data'}
            };
            this.$axios.post(baseURL+"api/jp-TIFS-FileCenter-ms/file",param,configFile)
              .then((data)=>{
                this.s_alert("上传成功！");
                //console.log(data.data.fileID);
                this.AddModalData.STORE_ID = data.data.fileID;
                this.s_loading(false);
              })
              .catch((err)=>{
                this.s_alert("上传失败！");
                this.s_loading(false);
                //console.log(err);
              });
          },
          //图标
          filePhoto(ele){
            this.photoFile = ele.target.files[0];
            if( this.photoFile.type ){
              let imgTypeArr = this.photoFile.type.split("/");
              let imgType = imgTypeArr[imgTypeArr.length-1];
              //console.log(imgType);
              if( this.verifyForm.isImg(imgType) ){
                this.photoSrc = window.URL.createObjectURL(this.photoFile);
                this.isDisabled = false;
              }else{
                this.s_alert("选择的不是图片文件！");
                this.photoSrc = "";
                this.$refs.formFile.value = "";
              }
            }else{
              this.s_alert("选择的不是图片文件！");
            }
          },
          //提交
          subBtn(){
            //console.log(this.AddModalData);
            //return false;
            if( this.verifyForm.isNull(this.AddModalData.NAME) ){
              this.s_alert("图标名称不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddModalData.STORE_ID) ){
              this.s_alert("图标不能为空！");
              return false;
            }
            this.s_loading(true);
            let paramsKey = [];
            let paramsValue = [];

            for( let key in this.AddModalData ){
              paramsKey.push(key);
              paramsValue.push(this.AddModalData[key]);
            }

            let params = {
              "columns": paramsKey,
              "dataTypeCode": "pointresource",
              "datas": paramsValue,
              "tableName": "T_RES_IMAGE_LIB"
            };
            //console.log(params);
            //return false;
            this.$axios.post(this.HOST+"/base/save",params)
              .then((data)=>{
                //console.log(data);
                if( data.data.success ){
                  this.s_alert("上传成功！");
                  this.s_logwrite("点位信息管理-图标库管理","新增图标");
                  this.close()
                }else{
                  this.s_alert("上传失败！")
                }
                this.s_loading(false);
              })
              .catch((err)=>{
                //console.log(err);
                this.s_loading(false);
              })
          },

          //关闭弹窗
          close(){
            this.$emit("addModalClose");
            this.clearData(); //关闭弹窗清除数据
          },
          //清除数据
          clearData(){
            this.AddModalData={
              NAME:'', //图标名称
              STORE_ID:"",
              UPLOAD_USER:""
            };
            this.photoSrc = "";
            this.$refs.formFile.value = "";
            this.isDisabled = false;
          }
        }
    }
</script>

<style scoped lang="scss">
  .sectionTree{
    position: absolute;
    top: 30px;
    right: 0;
    width: 80%;
    z-index: 2;
    background-color: #fff;
    border:1px solid rgba(51,51,51,0.2);
    box-sizing: border-box;
    padding: 5px;
    max-height: 200px;
    overflow-y: auto;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }

</style>
